<template>
  <div v-loading="loading">
    <!-- <ContentWrap>
      <HeaderTitle title="修改EQIM设置" :isdivider="false" />
    </ContentWrap> -->
    <div class="add-eqim-content">
      <div style="margin-left: 20px">
        <ContentWrapForm
          style="padding: 10px 0px; border: none; height: 15px; font-weight: 900"
          :title="'服务器配置'"
        />
        <el-divider style="padding: 0; margin: 0" />
        <div class="add-eqim-content-titlebox">
          <div class="add-eqim-content-title2">
            <el-form :model="form">
              <el-form-item
                prop="pulsarEnabled"
                style="width: 100%; height: 20px; margin: 20px 0px"
              >
                <el-checkbox v-model="form.pulsarCheck" size="large" :disabled="isView" />
                <div style="font-size: 14px; font-weight: 700; margin-left: 10px; color: #333333"
                  >启用Pulsar校验:</div
                >
              </el-form-item>
            </el-form>
          </div>
          <div class="add-eqim-content-Pulsar">
            <div style="display: flex">
              <el-form-item prop="pulsarUrl" style="width: 260px">
                <div style="font-size: 14px; color: #666666">Pulsar连接URL:</div>
                <el-input
                  v-model="form.pulsarUrl"
                  placeholder="请输入"
                  style="width: 260px; height: 32px; margin-top: 10px"
                  :disabled="isView"
                ></el-input>
              </el-form-item>
              <el-form-item prop="pulsarToken" style="width: 260px; margin-left: 52px">
                <div style="font-size: 14px; color: #666666">Pulsar授权Token:</div>
                <el-input
                  v-model="form.pulsarToken"
                  placeholder="请输入"
                  style="width: 260px; height: 32px; margin-top: 10px"
                  :disabled="isView"
                ></el-input>
              </el-form-item>
              <el-form-item prop="pulsarTopic" style="width: 260px; margin-left: 52px">
                <div style="font-size: 14px; color: #666666">Pulsar订阅主题:</div>
                <el-input
                  v-model="form.pulsarTopic"
                  placeholder="请输入"
                  style="width: 260px; height: 32px; margin-top: 10px"
                  :disabled="isView"
                ></el-input>
              </el-form-item>
            </div>
          </div>
          <div class="add-eqim-content-Pulsar">
            <el-form-item
              prop="databaseEnabled"
              style="width: 100%; height: 20px; margin: 20px 0px"
            >
              <el-checkbox v-model="form.dbCheck" size="large" :disabled="isView" />
              <div style="font-size: 14px; font-weight: 700; margin-left: 10px; color: #333333"
                >启用数据库校验:</div
              >
            </el-form-item>
          </div>
          <div style="display: flex">
            <el-form-item prop="databaseIp" style="width: 260px">
              <div style="font-size: 14px; width: 260px; color: #666666">数据库服务器IP:</div>
              <input
                type="text"
                v-model="ipParts0"
                style="
                  width: 56px;
                  height: 30px;
                  border: 1px solid #b0b0b0;
                  border-radius: 6px;
                  margin-top: 10px;
                "
                :disabled="isView"
              />
              <span style="width: 4px; height: 22px">.</span>
              <input
                type="text"
                v-model="ipParts1"
                style="
                  width: 56px;
                  height: 30px;
                  border: 1px solid #b0b0b0;
                  border-radius: 6px;
                  margin-top: 10px;
                "
                :disabled="isView"
              />
              <span style="width: 4px; height: 22px">.</span>
              <input
                type="text"
                v-model="ipParts2"
                style="
                  width: 56px;
                  height: 30px;
                  border: 1px solid #b0b0b0;
                  border-radius: 6px;
                  margin-top: 10px;
                "
                :disabled="isView"
              />
              <span style="width: 4px; height: 22px">.</span>
              <input
                type="text"
                v-model="ipParts3"
                style="
                  width: 56px;
                  height: 30px;
                  border: 1px solid #b0b0b0;
                  border-radius: 6px;
                  margin-top: 10px;
                "
                :disabled="isView"
              />
            </el-form-item>
            <el-form-item prop="databasePort" style="width: 260px; margin-left: 52px">
              <div style="font-size: 14px; color: #666666">数据库端口:</div>
              <el-input
                v-model="form.dbPort"
                placeholder="请输入"
                style="width: 260px; height: 35px; margin-top: 10px"
                :disabled="isView"
              ></el-input>
            </el-form-item>
            <el-form-item prop="databaseUsername" style="width: 260px; margin-left: 52px">
              <div style="font-size: 14px; color: #666666">数据库用户名:</div>
              <el-input
                v-model="form.dbUsername"
                placeholder="请输入"
                style="width: 260px; height: 35px; margin-top: 10px"
                :disabled="isView"
              ></el-input>
            </el-form-item>
            <el-form-item prop="databasePassword" style="width: 260px; margin-left: 52px">
              <div style="font-size: 14px; color: #666666">数据库密码:</div>
              <el-input
                v-model="form.dbPassword"
                placeholder="请输入"
                style="width: 260px; height: 35px; margin-top: 10px"
                :disabled="isView"
              ></el-input>
            </el-form-item>
          </div>
          <div style="display: flex; width: 260px; margin-top: -20px">
            <el-form-item prop="databaseName" style="margin-top: 10px">
              <div style="font-size: 14px; color: #666666; width: 260px">数据库名称:</div>
              <el-input
                v-model="form.database"
                placeholder="请输入"
                style="width: 260px; height: 35px; margin-top: 10px"
                :disabled="isView"
              ></el-input>
            </el-form-item>
            <el-form-item prop="databaseEncoding" style="margin-top: 16px; margin-left: 52px">
              <div style="font-size: 14px; color: #666666; width: 260px">数据库编码:</div>
              <el-input
                v-model="form.dbCharset"
                placeholder="请输入"
                style="width: 260px; height: 35px; margin-top: 10px"
                :disabled="isView"
              ></el-input>
            </el-form-item>
            <el-form-item prop="webInterval" style="margin-top: 16px; margin-left: 52px">
              <div style="font-size: 14px; color: #666666; width: 260px">数据库校验间隔:</div>
              <el-input
                v-model="form.dbCheckInterval"
                placeholder="请输入"
                style="width: 239px; height: 35px; margin-top: 10px"
                :disabled="isView"
                @input="validateInput1"
              ></el-input>
              <span style="margin-left: 7px; color: #666666; font-size: 14px">秒</span>
            </el-form-item>
          </div>
          <div class="add-eqim-content-Pulsar">
            <el-form-item prop="webEnabled" style="width: 100%; height: 20px; margin: 10px 0px">
              <el-checkbox v-model="form.webCheck" size="large" :disabled="isView" />
              <div style="font-size: 14px; font-weight: 700; margin-left: 10px; color: #333333"
                >启用网站校验:</div
              >
            </el-form-item>
          </div>
          <div style="display: flex">
            <el-form-item prop="webUrl" style="width: 260px">
              <div style="font-size: 14px; color: #666666; margin-top: 8px">校验URL:</div>
              <el-input
                v-model="form.checkUrl"
                placeholder="请输入"
                style="width: 260px; height: 35px; margin-top: 10px"
                :disabled="isView"
              ></el-input>
            </el-form-item>
            <el-form-item prop="webInterval" style="width: 260px; margin-left: 52px">
              <div style="font-size: 14px; color: #666666; margin-top: 8px">网站校验间隔:</div>
              <el-input
                v-model="form.webCheckInterval"
                placeholder="请输入"
                style="width: 239px; height: 35px"
                :disabled="isView"
                @input="validateInput"
              ></el-input>
              <span style="margin-left: 7px; color: #666666; font-size: 14px">秒</span>
            </el-form-item>
          </div>
        </div>
      </div>
    </div>

    <div class="add-eqim-bottom">
      <ContentWrapForm
        style="padding: 10px 0px; border: none; height: 15px"
        :title="'地震过滤设置'"
      />
      <el-divider style="padding: 0; margin: 0" />
      <div class="add-eqim-bottom-filter">
        <el-form-item prop="networkCodes" style="margin-top: 20px">
          <div style="font-size: 14px; width: 100%; color: #666666">台网代码:</div>
          <div>
            <el-checkbox v-model="twCodesbox" label="CC" size="large" :disabled="isView"
              ><span style="font-size: 14px; color: #333333">CC</span></el-checkbox
            >
            <el-checkbox v-model="twCodesbox" label="CD" size="large" :disabled="isView"
              ><span style="font-size: 14px; color: #333333">CD</span></el-checkbox
            >
            <el-checkbox v-model="twCodesbox" label="AU" size="large" :disabled="isView"
              ><span style="font-size: 14px; color: #333333">AU</span></el-checkbox
            >
          </div>
        </el-form-item>
        <el-form-item prop="magnitude" style="margin-top: 20px; width: 300px">
          <div style="font-size: 14px; width: 100%; color: #666666; margin-left: 65px"
            >震级大于等于:</div
          >
          <div style="margin-left: 65px">
            <el-input
              v-model="form.magnitude"
              placeholder="请输入"
              style="width: 260px; height: 35px"
              :disabled="isView"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item prop="distance" style="margin-top: 20px">
          <div style="font-size: 14px; width: 100%; color: #666666; margin-left: 90px"
            >区域外扩距离:</div
          >
          <div style="margin-left: 90px">
            <el-input
              v-model="form.distance"
              placeholder="请输入"
              style="width: 260px; height: 35px"
              :disabled="isView"
            ></el-input>
          </div>
        </el-form-item>
      </div>
      <div class="region">
        <el-form-item prop="type">
          <div style="font-size: 18px; width: 100%; color: #666666">区域范围:</div>
          <el-radio-group v-model="form.type" @change="handleTypeChange" :disabled="isView">
            <el-radio :label="0" style="color: #000000; font-size: 14px">上传区域文件</el-radio>
            <el-radio :label="1" style="color: #000000; font-size: 14px" @click="provinceRef"
              >按行政区划选择</el-radio
            >
          </el-radio-group>
          <ProvinceCity
            style="margin-top: 10px"
            ref="provinceRef"
            :regionLists="form.regionList"
            @querySelect="querySelect"
            v-if="!isProvinceCityDisabled"
            :disabled="isProvinceCityDisabled"
          />
        </el-form-item>
      </div>

      <el-form-item
        v-if="form.type === 0"
        label=""
        style="margin-left: 10px; width: 100%; color: #666666"
      >
        <UploadFile
          v-model="form.fileNames"
          :updateUrl="uploadUrl"
          :downloadFileUrl="downloadFileUrl"
          @uploadSuccess="uploadSuccess"
          @removeFile="removeFile"
          :limit="1"
        ></UploadFile>
      </el-form-item>
      <el-form-item v-if="form.type === 1" label="" style="margin-left: 60px">
        {{ regionLists }}
      </el-form-item>
      <LoadMap :fileidInfo="fileidInfo" style="width: 100%; height: 400px; margin-top: 25px" />
    </div>
    <div style="margin-top: 72px; display: flex; justify-content: center">
      <el-col :span="24" class="el-colfoot">
        <el-button size="large" @click="close">关闭</el-button>
        <el-button type="primary" size="large" @click="save" v-if="!isView">保存</el-button>
      </el-col>
    </div>
  </div>
</template>

<script setup>
import UploadFile from '@/views/responseLevel/populationDensity/create/UploadFile.vue'
import ProvinceCity from '@/views/responseLevel/populationDensity/create/provinceCity.vue'
import LoadMap from '@/views/earthquake/earthquakeServer/gis/LoadMap.vue'
import { ref, defineEmits } from 'vue'
import { useRoute } from 'vue-router'
const { currentRoute, push } = useRouter() // 路由
import { ElMessage } from 'element-plus'
import * as eqimApi from '@/api/earthquake/eqim'
import * as timingTrigger from '@/api/earthquake/timingTrigger'
const uploadUrl = ref(import.meta.env.VITE_BASE_URL + '/admin-api/att/uploadShpFile1')
const downloadFileUrl = ref(import.meta.env.VITE_BASE_URL + '/admin-api/att/downLoadFile')
const route = useRoute()
const loading = ref(false)
const props = defineProps({
  id: {
    type: String
  }
})
const emit = defineEmits(['updatecreate','savecreate'])
const id = props.id
const show = ref(true)
const ipParts0 = ref('')
const ipParts1 = ref('')
const ipParts2 = ref('')
const ipParts3 = ref('')
const twCodesbox = ref([])
const isView = ref(route.query.type === 'detail')
const form = ref({
  pulsarCheck: false,
  enabled: true,
  pulsarUrl: '',
  pulsarToken: '',
  pulsarTopic: '',
  dbCheck: false,
  dbHost: '',
  dbUsername: '',
  database: '',
  dbCheckInterval: null,
  dbPort: null,
  dbPassword: '',
  dbCharset: '',
  webCheck: false,
  checkUrl: '',
  webCheckInterval: null,
  twCodes: '',
  magnitude: '',
  pageNo: 0,
  pageSize: 0,
  type: null,
  distance: null,
  areaFileId: '',
  fileNames: [],
  regionList: []
})
const provinceRef = ref()
const regionLists = ref('')
const uploadAction = 'your-upload-action-url'
const uploadHeaders = {
  Authorization: 'your-upload-token'
}

//初始化 type 0 -- 临时表 1 ---正式表 owner public公库 private四库
const fileidInfo = ref({
  fileid: route.query.type == 'create' ? '' : 'eqim_' + route.query.id,
  type: route.query.type == 'create' ? 0 : 1,
  query: {
    tableName: route.query.type == 'create' ? 'temp_shp_data' : 'earthquake_shp',
    fields: route.query.type == 'create' ? 'id' : 'id,p_id,province,city',
    owner: 'public'
  }
})

const getEqim = async () => {
  loading.value = true
  if (id !== '') {
    form.value = await eqimApi.getEqim(id).then((res) => {
      const host = res.dbHost.split('.')
      const twCodes = res.twCodes.split(',')
      if (twCodes.length > 0) {
        twCodes.forEach((item) => {
          twCodesbox.value.push(item)
        })
      }
      ipParts0.value = host[0]
      ipParts1.value = host[1]
      ipParts2.value = host[2]
      ipParts3.value = host[3]
      return res
    })
    if (form.value.fileNames) {
      form.value.fileNames = form.value.fileNames.map((item) => {
        return { name: item, url: form.value.areaFileId, attachId: form.value.areaFileId }
      })
    } else {
      form.value.fileNames = []
    }
    if (form.value.regionList) {
      let data = []
      form.value.regionList.forEach((item) => {
        if (item.city !== 'undefined' || !item.city) data.push(item.province)
        else data.push(item.province + '-' + item.city)
      })
      regionLists.value = data.join(',')
    } else {
      form.value.regionList = []
    }
  }
  loading.value = false
}

const validateInput = (value) => {
  console.log(value)
  // 验证输入是否超出最大值
  if (value >= 86400) {
    form.value.webCheckInterval = 86399 // 设置最大值
  }
}

const validateInput1 = (value) => {
  console.log(value)
  // 验证输入是否超出最大值
  if (value >= 86400) {
    form.value.dbCheckInterval = 86399 // 设置最大值
  }
}

// 上传成功
const uploadSuccess = (file) => {
  form.value.areaFileId = file[0].attachId
  fileidInfo.value.type = 0
  fileidInfo.value.query.tableName = 'temp_shp_data'
  fileidInfo.value.query.fields = 'id'
  fileidInfo.value.query.owner = 'public'
  fileidInfo.value.fileid = file[0].id
}

// 删除文件
const removeFile = (file) => {
  form.value.areaFileId = ''
  timingTrigger.deleteFile(file.attachId)
  fileidInfo.value.fileid = ''
}

//区域范围
const handleTypeChange = (val) => {
  if (!provinceRef.value) return
  if (val === 1) {
    provinceRef.value.open()
  } else {
    provinceRef.value.close()
    form.value.regionList = []
    regionLists.value = ''
    cityListCancel()
  }
}

const cityListCancel = () => {
  fileidInfo.value = {
    type: 0,
    query: {
      tableName: '',
      fields: ''
    },
    fileid: null
  }
}

const querySelect = (value) => {
  let data = []
  value.forEach((item) => {
    if (item.city) {
      data.push(item.province + '-' + item.city)
    } else {
      data.push(item.province)
    }
  })
  regionLists.value = data.join(',')
  form.value.regionList = value
  cityList()
}

const cityList = async () => {
  if (form.value.type !== 1) return
  let citydatas = {
    city: regionLists.value
  }
  try {
    const response = await eqimApi.postCityList(citydatas)
    fileidInfo.value.query.tableName = 'temp_shp_data'
    fileidInfo.value.query.fields = 'id'
    fileidInfo.value.type = 0
    fileidInfo.value.query.owner = 'public'
    fileidInfo.value.fileid = response.id
  } catch (error) {
    console.error('请求后端API时发生错误:', error)
  }
}

// 保存设置的逻辑
const save = async () => {
  loading.value = true
  const host = ipParts0.value + '.' + ipParts1.value + '.' + ipParts2.value + '.' + ipParts3.value
  form.value.dbHost = host
  form.value.twCodes =
    twCodesbox.value.length > 0 ? twCodesbox.value.filter((item) => item !== '').join(',') : ''
  form.value.fileNames = []
  console.log(twCodesbox.value)
  if (!form.value.type) form.value.regionList = []
  else form.value.areaFileId = null
  await eqimApi.updateEnable(form.value).then((res) => {
    console.log(res)
    if (res === 1) {
      emit('savecreate','list')
    } else {
      return ElMessage.warning(res.msg)
    }
  })
  loading.value = false
}

const close = () => {
  emit('updatecreate', 'list')
}

onMounted(() => {
  getEqim()
})
</script>

<style scoped>
/* 头部标题 */
.add-eqim-top {
  background-color: #fff;
  height: 70px;
  line-height: 70px;
}
.add-eqim-top h2 {
  margin-left: 20px;
}

/* 主体内容区域 */
.add-eqim-content {
  background-color: #fff;
  border-radius: 8px;
}

.add-eqim-content-title {
  display: flex;
  align-items: center;
}

.add-eqim-content-title div {
  width: 10px;
  height: 26px;
  background-color: #1890ff;
}

.add-eqim-bottom {
  background-color: #fff;
  margin-top: 10px;
  border-radius: 8px;
  padding: 20px;
}

.add-eqim-bottom-title3 div {
  width: 10px;
  height: 26px;
  background-color: #1890ff;
}

.add-eqim-bottom-title3 {
  display: flex;
  align-items: center;
  height: 70px;
  line-height: 70px;
}

.add-eqim-bottom-title3 h3 {
  margin-left: 8px;
}

.add-eqim-bottom-filter {
  /* display: flex;
  margin-left: 60px; */
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.el-colfoot {
  position: absolute;
  left: 0px;
  width: 100%;
  height: 72px;
  opacity: 1;
  bottom: 0;
  background: #ffffff;
  box-sizing: border-box;
  text-align: right;
  padding: 20px;
  z-index: 3;
}
</style>
